import React, {Component} from "react";
import {Card, Form, Modal} from "antd";
import { browserHistory } from 'react-router'
import PropTypes from "prop-types";
import {BtnsTableVEDA, EditFormNormal, SearchForm, TableContent, TreeTable} from "../../../../widgets/index";
import {HTTP, getDomain} from "../../../../utils/index";
import { menuList, menuAdd, menuDel } from "../../../../utils/api";
import BreadcrumbCustom from "../../../../components/BreadcrumbCustom";
const FormItem = Form.Item;

class MenuManager extends Component {

    static contextTypes = {
        router: PropTypes.object
    }

    constructor(props) {
        super(props);
        let appDomain = this.props.location.query.appDomain
        console.log(appDomain)
        this.table = undefined
        this.state = {
            appDomain: appDomain,
            searchParam: {
                appDomain: appDomain,
                parentId: 0
            },
            formVisible: false,
            formReadOnly: false,
            formInitData: {},
        }
    }

    seaBtns = [{
        label: '新增',
        onClick: () => this.invokeAdd({
            id: 0
        })
    }, {
        label: '返回',
        onClick: () => {
            browserHistory.goBack()
        }
    }]

    editFields = [{
        label: '名称',
        key: 'name',
        required: true,
        requiredMsg: '菜单名称必填'
    }, {
        label: '路径',
        key: 'path'
    }, {
        label: '排序',
        key: 'treeOrder'
    }]

    columns = [{
        title: '菜单名称',
        dataIndex: 'name',
        key: 'name',
    }, {
        title: '菜单路径',
        dataIndex: 'path',
        key: 'path',
    }, {
        title: '排序',
        dataIndex: 'treeOrder',
        key: 'treeOrder'
    }, {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <BtnsTableVEDA
                onView={this.invokeView.bind(this, record)}
                onEdit={this.invokeEdit.bind(this, record)}
                onDel={this.invokeDelete.bind(this, record)}
                onAdd={this.invokeAdd.bind(this, record)}
            />
        ),
    }]

    render() {
        return (
            <div>
                <BreadcrumbCustom first="系统管理" second="应用管理" third="关联菜单"/>
                <Card title="关联菜单" bordered={false}>
                    <SearchForm btns={this.seaBtns} onSearch={this.onSearch}/>
                    <TreeTable
                        ref={(e) => {this.table = e}}
                        columns={this.columns}
                        url = {menuList}
                        searchParam={this.state.searchParam}
                    />
                </Card>
                {
                    this.state.formVisible && (
                        <EditFormNormal
                            initData={this.state.formInitData}
                            fields={this.editFields}
                            onClose={() => this.hideForm()}
                            readOnly={this.state.formReadOnly}
                            onSave={this.invokeFormSubmit.bind(this)}
                        />
                    )
                }
            </div>
        )
    }

    onSearch = (values) => {
        this.setState({
            searchParam: Object.assign({}, this.state.searchParam, values)
        }, () => {
            this.table.loadData()
        })
    }

    invokeAdd = (record) => {
        this.setState({
            formReadOnly: false
        }, () => {
            console.log(record)
            this.showForm({
                parentId: record.id
            })
        })
    }

    invokeView = (record) => {
        this.setState({
            formReadOnly: true
        }, () => {
            this.showForm(record)
        })
    }

    invokeEdit = (record) => {
        this.setState({
            formReadOnly: false
        }, () => {
            this.showForm(record)
        })
    }

    invokeDelete = (record) => {
        HTTP.post(menuDel, record, () => {}, (resp) => {
            this.table.loadData()
        })
    }

    showForm = (d) => {
        this.setState({
            formVisible: true,
            formInitData: d || {}
        })
    }

    hideForm = () => {
        this.setState({
            formVisible: false,
            formInitData: {}
        })
    }

    invokeFormSubmit(params) {
        params['appDomain'] = this.state.appDomain
        HTTP.post(menuAdd, params, () => {}, (resp) => {
            Modal.success({
                title: '提示',
                content: '保存成功'
            })
            this.hideFormSuccess()
        })
        console.log(params)
    }

    hideFormSuccess = () => {
        this.setState({
            formVisible: false,
            formInitData: {}
        }, () => {
            this.table.loadData()
        })
    }
}

export default MenuManager;
